<template>
    <div class="video-item" @click="click">
        <div class="data-item">
            <div class="pic">
                <el-image
                    v-if="item.pptype"
                    class="img"
                    :src="item.cover_image"
                    :alt="item.name"
                    fit="cover"
                    lazy
                ></el-image>
                <el-image
                    v-else
                    class="img"
                    :src="item.image"
                    :alt="item.name"
                    fit="cover"
                    lazy
                ></el-image>
            </div>
            <div class="title">
                <div
                    v-if="item.pptype == 3"
                    class="tag"
                    :class="{
                        tag2: item.classes == 2,
                        tag3: item.classes == 3,
                    }"
                >
                    {{ item.classes_text }}
                </div>
                {{ item.name }}
                <div
                    class="abstract"
                    v-html="item.abstract ? item.abstract : item.describe"
                ></div>
            </div>
            <div v-if="item.pptype" class="info">
                <div v-if="item.pptype == 3" class="left">
                    {{ item.page_view }}人学过
                </div>
                <div v-else class="left">共{{ item.page_view }}播放</div>

                <div v-if="item.pptype == 3" class="right money">
                    <!-- <span>￥</span>0 -->
                    <!-- <img src="../../assets/school/leaf.png" alt="">{{item.money}} -->
                </div>
                <div
                    v-else-if="
                        item.pptype == 4 && item.type == 111 && item.money != 0
                    "
                    class="right money"
                >
                    {{ isPay == 1 ? "已购买" : "￥" + item.money }}
                </div>
                <div v-else class="right">
                    {{ item.date }}
                </div>
            </div>
            <div v-else class="info">
                <div v-if="menuIndex != '52'" class="left">
                    {{ item.browse }}人学过
                </div>
                <div v-else class="left">共{{ item.number }}道题</div>

                <div v-if="menuIndex == '51'" class="caozuo">
                    <div
                        v-if="item.is_pay != 0 && item.is_operate == '1'"
                        class="i-t i-t1"
                        @click.stop="goNiuZhang('sz')"
                    >
                        <i class="el-icon-edit"></i>实战
                    </div>
                    <div
                        v-if="item.is_vip == 0 && item.is_pay == 0"
                        class="i-t i-t2"
                        @click.stop="goNiuZhang('gm')"
                    >
                        <i class="el-icon-shopping-cart-full"></i>购买
                    </div>
                    <div
                        v-if="item.is_pay == 1"
                        class="i-t i-t3"
                        @click.stop="goNiuZhang('tk')"
                    >
                        <i class="el-icon-headset"></i>听课
                    </div>
                    <!-- <div
                        v-if="item.is_vip == 0 && item.is_pay == 0"
                        class="i-t"
                        style="color: #1c87f3"
                        @click.stop="goNiuZhang('st')"
                    >
                        <i class="el-icon-headset"></i>试听
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: "videoItem",
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
        isPay: {
            type: Number | String,
            default: 0,
        },
    },
    data() {
        return {
            nameColr: false,
            appShow: false,
        };
    },
    computed: {
        ...mapState("common", {
            menuIndex: (state) => state.menuIndex,
        }),
    },
    mounted() {},
    methods: {
        click() {
            this.$emit("click", this.item);
        },
        hovercCange(type) {
            this.nameColr = type;
        },

        goNiuZhang(e) {
            this.$emit("goNiuZhang", this.item, e);
        },
    },
};
</script>

<style lang="scss" scoped>
.video-item {
    margin: 13px 13px;
    &:hover .data-item {
        box-shadow: rgba(60, 65, 75, 0.1) 0px 8px 16px 0;
        top: -10px;
        .pic .img {
            transform: scale(1.1);
        }
    }
}

.data-item {
    cursor: pointer;
    width: 280px;
    height: 314px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    top: 0;
    transition: all 0.5s cubic-bezier(0, 0, 0, 1);

    .pic {
        width: 280px;
        height: 178px;
        overflow: hidden;

        .img {
            transform: scale(1);
            transition: transform 0.5s cubic-bezier(0, 0, 0, 1);
            width: 280px;
            height: 178px;
            object-fit: cover;
        }
    }

    .title,
    .info {
        padding: 0 18px;
    }

    .title {
        line-height: 21px;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        padding-top: 16px;
        height: 105px;
        cursor: pointer;

        .tag {
            display: inline-block;
            // width: 46px;
            padding: 0 5px;
            height: 19px;
            border-radius: 3px 3px 3px 3px;
            border: 1px solid #1c87f3;
            font-size: 12px;
            color: #1c87f3;
            line-height: 19px;
            text-align: center;
        }

        .tag2 {
            color: #00b578;
            border-color: #00b578;
        }

        .tag3 {
            color: #fa5151;
            border-color: #fa5151;
        }

        .abstract {
            font-size: 13px;
            color: #999999;
            line-height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            margin-top: 3px;
            height: 40px;
            &::v-deep p {
                line-height: 20px !important;
                white-space: break-spaces;
                color: #999999 !important;
                font-size: 13px !important;
            }
            &::v-deep span {
                line-height: 20px !important;
                white-space: break-spaces;
                color: #999999 !important;
                font-size: 13px !important;
            }
            &::v-deep a {
                line-height: 20px !important;
                white-space: break-spaces;
                color: #999999 !important;
                font-size: 13px !important;
            }
            &::v-deep img {
                display: none;
            }
        }
    }

    .info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
            font-size: 12px;
            color: #999999;
        }

        .right {
            font-size: 12px;
            color: #999999;
        }

        .caozuo {
            display: flex;
            align-items: center;
            font-size: 14px;

            > div {
                margin-left: 14px;
                cursor: pointer;
            }
            .i-t1 {
                color: #ff8f1f;
            }
            .i-t2 {
                color: #1c87f3;
                display: none;
            }
            .i-t3 {
                color: #1c87f3;
            }
        }

        .money {
            color: #fa5151;
            font-size: 18px;

            img {
                // font-size: 12px;
                width: 14px;
                height: 14px;
                position: relative;
                left: -1px;
                object-fit: contain;
            }
        }
    }
}
</style>